<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小米有品</title>
    <link rel="stylesheet" href="//at.alicdn.com/t/font_3349197_h97ozblkflu.css">
    <!-- 轮播图样式 -->
    <link rel="stylesheet" href="./libs/swiper/swiper-bundle.min.css">
    <link rel="stylesheet" href="./css/commom.css">
    <link rel="stylesheet" href="./css/小米有品.css">
</head>
<body>
    <!-- 头部 -->
    <header>
        <div class="container logo">
            <img src="./imgs/navi_title_v6.png" alt="">
            <div>
                <i class="iconfont icon-sousuo"></i>
                <input type="text" placeholder="空气净化器滤芯">
            </div>
        </div>
    </header>

    <!-- 主体内容 -->
    <main>
        <!-- banner -->
        <section class="swiper banner">
            <div class="swiper-wrapper">
                <div class="swiper-slide"><img src="./imgs/banner1.jpg" alt=""></div>
                <div class="swiper-slide"><img src="./imgs/banner2.jpg" alt=""></div>
                <div class="swiper-slide"><img src="./imgs/banner3.jpg" alt=""></div>
                <div class="swiper-slide"><img src="./imgs/banner4.jpg" alt=""></div>
                <div class="swiper-slide"><img src="./imgs/banner5.jpg" alt=""></div>
                <div class="swiper-slide"><img src="./imgs/banner6.jpg" alt=""></div>
                <div class="swiper-slide"><img src="./imgs/banner7.jpg" alt=""></div>
            </div>
            <!-- 如果需要分页器 -->
            <div class="swiper-pagination"></div>
            
            <!-- 如果需要导航按钮 -->
            <!-- <div class="swiper-button-prev"></div>
            <div class="swiper-button-next"></div> -->
        </section>
        <!-- 小导航列表 -->
        <ul class="container list">
            <li>
                <img src="./imgs/01.png" alt="">
                <p>每日上新</p>
            </li>
            <li>
                <img src="./imgs/02.png" alt="">
                <p>每日上新</p>
            </li>
            <li>
                <img src="./imgs/03.png" alt="">
                <p>每日上新</p>
            </li>
            <li>
                <img src="./imgs/04.png" alt="">
                <p>每日上新</p>
            </li>
            <li>
                <img src="./imgs/05.png" alt="">
                <p>每日上新</p>
            </li>
            <li>
                <img src="./imgs/06.png" alt="">
                <p>每日上新</p>
            </li>
            <li>
                <img src="./imgs/07.png" alt="">
                <p>每日上新</p>
            </li>
            <li>
                <img src="./imgs/08.png" alt="">
                <p>每日上新</p>
            </li>
            <li>
                <img src="./imgs/09.png" alt="">
                <p>每日上新</p>
            </li>
            <li>
                <img src="./imgs/10.png" alt="">
                <p>每日上新</p>
            </li>
        </ul>
        <!-- 活动专区 -->
        <ul class="container activity">
            <li>
                <img src="./imgs/activity-01.jpg" alt="">
                <p>直降千元</p>
                <span>清爆良品</span>
            </li>
            <li>
                <img src="./imgs/activity-02.jpg" alt="">
                <p>直降千元</p>
                <span>清爆良品</span>
            </li>
            <li>
                <img src="./imgs/activity-03.jpg" alt="">
                <p>直降千元</p>
                <span>清爆良品</span>
            </li>
            <li>
                <img src="./imgs/activity-04.jpg" alt="">
                <p>直降千元</p>
                <span>清爆良品</span>
            </li>
        </ul> 
        <!-- 小米有品众筹 -->
        <section class="container zhongchou">
            <div class="title">
                <p>小米有品众筹</p>
                <span>6款众筹中<i class="iconfont icon-xiangyou1"></i></span>
            </div>
            <div class="zhongchou-content">
                <!-- 左边大盒子 -->
                <div class="zhongchou-content-left">
                    <!-- 大盒子内容 -->
                    <div class="left-content">
                        <div class="left-content-top">
                            <div>
                                <p>专业级智能显微镜</p>
                                <span class="price">999</span>
                            </div>
                            <img src="./imgs/zhongchou01.png" alt="">
                        </div>
                        <div class="left-content-bottom">
                            <p><span>1698</span>人支持</p>
                            <p>完成度<span>167%</span></p>
                        </div>
                    </div>
                </div>
                <!-- 右边列表 -->
                <ul class="zhongchou-content-right">
                    <li>
                        <img src="./imgs/activity-03.jpg" alt="">
                        <p>小适感应剃须</p>
                        <span class="price">99</span>
                    </li>
                    <li>
                        <img src="./imgs/activity-03.jpg" alt="">
                        <p>小适感应剃须</p>
                        <span class="price">99</span>
                    </li>
                </ul>
            </div>
        </section>
        <!-- 上新精选 -->
        <section class="container new">
            <div class="title">
                <p>上新精选</p>
                <span>更多<i class="iconfont icon-xiangyou1"></i></span>
            </div>
            <ul class="activity">
                <li>
                    <img src="./imgs/new01.jpg" alt="">
                    <p>直降千元</p>
                </li>
                <li>
                    <img src="./imgs/new02.jpg" alt="">
                    <p>直降千元</p>
                </li>
                <li>
                    <img src="./imgs/new01.jpg" alt="">
                    <p>直降千元</p>
                </li>
                <li>
                    <img src="./imgs/new02.jpg" alt="">
                    <p>直降千元</p>
                </li>
            </ul>
        </section>

        <!-- 秒杀 -->
        <section class="container sale">
            <div class="title">
                <p>有品秒杀</p>
                <span>更多<i class="iconfont icon-xiangyou1"></i></span>
            </div>
            <ul>
                <li>
                    <div>
                        <img src="./imgs/miaosha01.jpg" alt="">
                    </div>
                    <p>￥7.5起<span>￥29</span></p>
                </li>
                <li>
                    <div>
                        <img src="./imgs/miaosha02.jpg" alt="">
                    </div>
                    <p>￥7.5起<span>￥29</span></p>
                </li>
                <li>
                    <div>
                        <img src="./imgs/miaosha03.jpg" alt="">
                    </div>
                    <p>￥7.5起<span>￥29</span></p>
                </li>
                <li>
                    <div>
                        <img src="./imgs/miaosha05.jpg" alt="">
                    </div>
                    <p>￥7.5起<span>￥29</span></p>
                </li>

            </ul>
        </section>
        
    </main>

    <!-- 尾部 -->
    <footer>
        <div>
            <i class="iconfont icon-shouye1"></i>
            <span>首页</span>
        </div>
        <div>
            <i class="iconfont icon-fenlei"></i>
            <span>分类</span>
        </div>
        <div>
            <i class="iconfont icon-shenghuo"></i>
            <span>生活</span>
        </div>
        <div>
            <i class="iconfont icon-gouwuche"></i>
            <span>购物车</span>
        </div>
        <div>
            <i class="iconfont icon-wode1"></i>
            <span>我的</span>
        </div>
    </footer>


    <!-- swiper轮播图js -->
    <script src="./libs/swiper/swiper-bundle.min.js"></script>
    <script src="./js/小米有品.js"></script>
</body>
</html>